<template>
  <div class="contain">
    <div class="p3">
      <p class="p1">结算</p>
      <p class="p2">(共{{selectnum}}价商品)</p>
    </div>
    <div v-show="isshow">
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </div>
    <div v-show="!isshow">
      <van-address-list
        v-model="chosenAddressId"
        :list="addressList"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
      <!-- 商品管理，从订单页面选中的 -->
      <div class="goods">
        <p class="goods1">商品明细</p>
        <div v-for="item in shoppingcarList" :key="item.id">
          <van-card
            :num="item.goodsbuynum"
            :price="item.goodsprice"
            :desc="item.goodsname"
            :thumb="item.goodsimg"
          ></van-card>
        </div>
      </div>
      <div class="summary">
        <p class="order">订单汇总</p>
        <div class="total_price">
          <p class="total">商品总价</p>
          <p class="price">￥{{price}}</p>
        </div>

        <P class="pmail">PCH5包邮</P>
      </div>

      <div class="submit_orders">
        <div>
          <p class="amount">商品总额</p>
          <p class="price_amount">￥{{price}}</p>
        </div>
        <div class="submit_orders_1" @click="gotopay">提交订单</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.submit_orders_1 {
  width: 35%;
  height: 40px;
  line-height: 40px;
  background: #000;
  margin-top: 7px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.amount {
  font-size: 12px;
  margin: 0;
  padding: 0;
}
.price_amount {
  font-size: 16px;
  color: #000;
  margin: 0;
  padding: 0;
}
.submit_orders {
  width: 100%;
  height: 54px;
  position: fixed;
  background-color: white;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: space-between;
  box-sizing: border-box;
}
.summary {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}
.order {
  font-size: 14px;
  color: #000;
  padding-left: 10px;
}
.total_price {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
}
.total {
  font-size: 13px;
  color: #666;
}
.price,
.pmail {
  font-size: 13px;
  color: #666;
}
.pmail {
  padding-left: 10px;
}
.goods {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}
.goods1 {
  color: #000;
  font-size: 14px;
  padding-left: 10px;
}
.p1 {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  padding: 0 10px;
  display: inline-block;
}
.p2 {
  color: #666;
  font-size: 12px;
  line-height: 22px;
  display: inline-block;
}
.p3 {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}
.contain {
  margin-top: 54px;
}
.van-address-list__bottom {
  position: relative;
}
.contain {
  margin-bottom: 50px;
}
.van-address-list {
  padding-bottom: 24px !important;
}
</style>
<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
import { areaList } from "@vant/area-data";
import { Toast } from "vant";
export default {
  data() {
    return {
      areaList,
      isshow: false
      //   chosenAddressId: 1
    };
  },
  computed: {
    ...mapState("shoppingcar", {
      shoppingcarList: state => state.list.filter(item => item.ischecked)
    }),
    ...mapGetters({
      price: "shoppingcar/price",
      selectnum: "shoppingcar/selectnum"
    }),
    ...mapState("address", {
      addressList: state =>
        state.addresslist.map(item => {
          item.address =
            item.province + item.city + item.county + item.addressDetail;
          return item;
        }),
      addressid: state => state.addressid
    }),
    ...mapState(["userid"]),
    chosenAddressId: {
      get() {
        //取值
        return this.addressid;
      },
      set(id) {
        //赋值
        this.changeid(id);
      }
    }
  },
  methods: {
    ...mapActions("address", ["addaddresslist", "innitaddresslist"]),
    ...mapMutations("address", ["changeid"]),
    onSave(info) {
      console.log(info);
      this.addaddresslist({
        ...info,
        userid: this.userid,
        success: () => {
          this.isshow = false;
        }
      });
    },
    onDelete() {
      Toast("delete");
    },
    onAdd() {
      this.isshow = true;
      console.log("添加");
    },
    onEdit(item, index) {
      //列表页面点击的编辑
      console.log(item);
      Toast("编辑地址:" + index);
    },
    gotopay() {
      this.$router.push("/pay");
    }
  },
  created() {
    this.innitaddresslist({
      userid: this.userid
    });
  }
};
</script>
